<template>
    <div class="tab-bar" :class="{'active': isOpen}">
        <van-tabbar class="tab-bar-wrapper">
            <div class="playing" @click.stop="openBar">
                <div class="music-image"><img :src="currentImg" alt=""></div>
<!--                <p class="music-title">{{musicName}}</p>-->
                <van-notice-bar class="music-title" :text="musicName"
                                :background="isOpen ? '#fff' : '#f7f7f7'"
                                color="#0a0a0a"/>
                <div class="progress-bar" v-if="isOpen">
                    <div class="total-bar">
                        <span class="played-bar" :style="'width: ' + currentTime / totalTime * 100 + '%'"></span>
                    </div>
                    <div class="time">
                        <span>{{playedTime}}</span>
                        <span>{{musicTime}}</span>
                    </div>
                </div>
                <div class="controls">
                    <i class="iconfont icon-rewind-back" v-if="isOpen"></i>
                    <i class="iconfont play" :class="isPlay ? 'icon-pause' : 'icon-play'" @click.stop="play"></i>
                    <i class="iconfont icon-rewind-forward" @click.stop="next()"></i>
                </div>
                <div class="others-bar" v-if="isOpen">
                    <div @click="changePlayState(0)" :class="{'active': currentActive === 0}">
                        <i class="iconfont icon-liebiaoxunhuan"></i>
                    </div>
                    <div @click="changePlayState(1)" :class="{'active': currentActive === 1}">
                        <i class="iconfont icon-danquxunhuan"></i>
                    </div>
                    <div @click="changePlayState(2)" :class="{'active': currentActive === 2}">
                        <i class="iconfont icon-suiji"></i>
                    </div>
                </div>
            </div>
<!--            <van-notice-bar :text="musicName"-->
<!--                            left-icon="volume-o"-->
<!--                            class="play-bar"-->
<!--                            color="#0a0a0a"-->
<!--                            background="#f7f7f7">-->
<!--                <div slot="left-icon" class="controls">-->
<!--                    <i class="iconfont" :class="isPlay ? 'icon-bofang' : 'icon-zanting'" @click="play"></i>-->
<!--                    <i class="iconfont icon-kuaijin" @click="next()"></i>-->
<!--                </div>-->
<!--                <span slot="right-icon" style="padding-left: 10px;display: block;width: 56px;" @click="changeLyric">-->
<!--                    {{isShowKrc ? '隐藏' : '显示'}}歌词-->
<!--                </span>-->
<!--            </van-notice-bar>-->
        </van-tabbar>
    </div>
</template>

<script>
    import {mapState} from "vuex";
    import axios from "../http/axios";

    const playState = ['list', 'loop', 'random'];
    export default {
        name: "TabBar",
        data() {
            return {
                isPlay: false,
                isShowKrc: false,
                isOpen: false,
                musicTime: '--:--',
                playedTime: '--:--',
                totalTime: 0,
                currentActive: 0,
                currentState: 'list',
                currentTime: 0,
                currentImg: 'http://img4.imgtn.bdimg.com/it/u=3413101525,1189252897&fm=26&gp=0.jpg'
            }
        },
        props: {
            musicName: String,
        },
        watch: {
            musicPlayer: {
                handler(val) {
                    if (val) {
                        this.isPlay = val.isPlay;
                        this.musicTime = this.getMusicTime(val.duration);
                        this.playedTime = this.getMusicTime(val.currentTime);
                        this.totalTime = val.duration;
                        this.currentTime = val.currentTime;
                        this.currentImg = val.img;
                    }
                },
                deep: true
            }
        },
        computed: {
            ...mapState({
                musicPlayer: 'musicPlayer',
                musicList: 'musicList'
            })
        },
        methods: {
            play() {
                this.isPlay ? this.musicPlayer.pause() : this.musicPlayer.src ? this.musicPlayer.play() : '';
            },
            changeLyric() {
                this.isShowKrc = !this.isShowKrc
                this.$emit('showLyric', this.isShowKrc);
            },
            next() {
                switch (this.musicPlayer.playState) {
                    case 'loop':
                        this.musicPlayer.dom.load();
                        this.musicPlayer.play();
                        break;
                    case 'random':
                        this.getRandomMusic();
                        break;
                    case 'list':
                        this.getNextMusic();
                        break;
                }
            },
            // 获取下一首歌
            getNextMusic() {
                let index = this.musicList.indexOf(this.musicPlayer.audio);
                index ++;
                this.musicPlayer.audio = this.musicList[index];
                this.musicPlayer.setSrc(this.musicList[index].url);
                this.getCurrentKrc(this.musicList[index].name + this.musicList[index].author);
                this.$nextTick(() => {
                    this.musicPlayer.play();
                })
            },
            // 获取随机歌曲
            getRandomMusic() {
                const randomIndex = parseInt(Math.random() * this.musicList.length);
                this.musicPlayer.audio = this.musicList[randomIndex];
                this.musicPlayer.setSrc(this.musicList[randomIndex].url);
                this.getCurrentKrc(this.musicList[randomIndex].name + this.musicList[randomIndex].author);
                this.$nextTick(() => {
                    this.musicPlayer.play();
                })
            },
            // 获取当前歌曲的歌词信息
            getCurrentKrc(name) {
                this.$store.commit('updateCurrentKrc', []);
                axios.get('/api/krc/' + name)
                    .then(res => {
                        const data = res.data.data.data.lyrics.split('\n');
                        const lyric = this.formatKrc(data.slice(10, data.length - 1));
                        this.$store.commit('updateCurrentKrc', lyric);
                        this.musicPlayer.img = res.data.data.data.img;
                        // this.musicPlayer.lyric = lyric;
                    })
            },
            // 格式化歌词
            formatKrc(k) {
                if (!k.length || !k[0]) return;
                return k.map(item => {
                    if (!item) return;
                    const time = item.substring(1, item.indexOf(']'));
                    const timestamp = time.split(':')[0] * 60 + Number(time.split(':')[1]);
                    return {
                        timestamp,
                        content: item.substring(item.indexOf(']') + 1)
                    }
                })
            },
            // 展开底部栏
            openBar() {
                this.isOpen = true;
                this.$emit('scaleContent', true);
            },
            closeBar() {
                this.isOpen = false;
                this.$emit('scaleContent', false);
            },
            getMusicTime(time) {
                const minute = parseInt(time / 60);
                const second = parseInt(time % 60);
                return `${minute < 10 ? '0' + minute : minute}:${second < 10 ? '0' + second : second}`;
            },
            // 更改音乐状态
            changePlayState(index) {
                this.currentActive = index;
                this.currentState = playState[index];
                this.musicPlayer.changePlayState(this.currentState);
            }
        },
        mounted() {
            this.$nextTick(() => {
                this.musicPlayer.dom.onended = () => {
                    this.next();
                }
                document.body.addEventListener('click', () => {
                    this.closeBar();
                })
            })
        }
    }
</script>

<style lang="less">
    .tab-bar {
        .tab-bar-wrapper {
            transition: all 0.35s;
            height: 8.86vh
        }
        .play-bar {
            width: 100vw;
            height: 100%;
            .controls {
                height: 50px;
                display: flex;
                align-items: center;
            }
            .iconfont {
                font-size: 20px;
                margin-right: 10px;
            }
        }
        .playing {
            height: 100%;
            width: 100vw;
            background-color: #f7f7f7;
            color: #0a0a0a;
            display: flex;
            align-items: center;
            padding: 0 20px;
            .music-image {
                width: 48px;
                height: 48px;
                border-radius: 3px;
                overflow: hidden;
                box-shadow: 0 2px 8px 0 #b9b9b9;
                transition: all 0.35s;
                & > img {
                    display: block;
                    width: 100%;
                    height: 100%;
                }
            }
            .music-title {
                width: 45vw;
                margin-left: 16px;
                font-size: 16px;
            }
            .controls {
                position: absolute;
                right: 20px;
                display: flex;
                align-items: center;
                .iconfont {
                    font-size: 25px;
                    margin-left: 20px;
                }
                .disable {
                    color: #e5e4e4;
                }
            }
        }
        &.active {
            .tab-bar-wrapper {
                height: 90vh;
                overflow: hidden;
                border-top-left-radius: 10px;
                border-top-right-radius: 10px;
                padding: 0 33px;
                box-sizing: border-box;
            }
            .playing {
                background-color: #fff;
                flex-direction: column;
                .music-image {
                    width: 67.5vw;
                    height: 67.5vw;
                    margin-top: 66px;
                    border-radius: 8px;
                    border: 1px solid #dcdcdc;
                }
                .music-title {
                    width: 100%;
                    background-color: #fff;
                    margin-top: 25px;
                }
                .progress-bar {
                    margin-top: 25px;
                    width: 100%;
                    height: 25px;
                    .total-bar {
                        width: 100%;
                        height: 3px;
                        border-radius: 3px;
                        background-color: #e4e4e5;
                        overflow: hidden;
                        .played-bar {
                            transition: all 0.3s linear;
                            display: block;
                            height: 100%;
                            width: 1%;
                            background-color: #c4c4c6;
                        }
                    }
                    .time {
                        font-size: 0.1rem;
                        display: flex;
                        justify-content: space-between;
                        align-items: center;
                        color: #c4c4c6;
                    }
                }
                .controls {
                    justify-content: space-between;
                    width: 50vw;
                    margin-top: 20px;
                    position: unset;
                    .iconfont {
                        margin: 0;
                        font-size: 30px;
                        &.play {
                            font-size: 45px;
                        }
                    }
                }
                .others-bar {
                    margin-top: 35px;
                    width: 40vw;
                    display: flex;
                    justify-content: space-between;
                    & > div {
                        width: 30px;
                        height: 30px;
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        border-radius: 3px;
                        transition: all 0.3s;
                    }
                    .active {
                        background-color: #e0e0e0;
                    }
                }
            }
        }
    }
</style>
